import { Link } from 'react-router-dom';
import strategies from '../assets/strategies.json';
import '../styles/EnterPage.css'

// 主页面
function HomePage() {
    return (
        <div className='enter-page-content'>
            <h1> Gandalf: Finance Quant System </h1>
            <img src="src/assets/gandalf.png" className="gandalf" alt="gandalf"/>
        </div>
    );
}

// 回测页面
function BacktestPage() {
    return (
        <div className='enter-page-content'>
            <h1> TODO </h1>
        </div>
    );
}

function GalleryBlock({title, summary}) {
    return (
      <div className="gallery-block">
        <h2> {title} </h2>
        <p> {summary} </p>
        <Link to={`/strategy/${title}`}>
            <button> 查看详情 </button>
        </Link>
      </div>
    );
}

// 展厅页面
function GalleryPage() {
    return (
        <div className="enter-page-content">
            <h1> Strategy gallery </h1>
            <div className="gallery-blocks">
                { Object.keys(strategies).map((title, index) => (
                    <GalleryBlock
                        key={ index }
                        title={ title }
                        summary={ strategies[title].summary }
                    />
                ))}
            </div>
        </div>
    );
}

function EnterPage({ state }) {
    return (
        <div>
            {state === '主页' && <HomePage />}
            {state === '策略' && <GalleryPage />}
            {state === '回测' && <BacktestPage />}
        </div>
    );
}

export default EnterPage;
